<template>
  <FullScreenDialog :title="dialog.title" :width="dialog.width" :screenFlag="dialog.screenFlag" :visible="dialog.visible"
    v-if="dialog.visible" :showFooter="dialog.showFooter" @onClose="onClose" @onConfirm="confirm">
    <template v-slot:content>
      <div class="related">
        <div class="related-pdf">
          <!-- 什么数据在渲染这个东西 以前的历史数据怎么渲染的 -->
          <ImgCanvas ref="RefImgCanVas"
            :img="showDate.img_info && showDate.img_info[0] && showDate.img_info[0].imageBase64"
            :img-obj="showDate.img_info && showDate.img_info[0] && showDate.img_info[0]"
            :record-list="showDate.recordList">
          </ImgCanvas>
          <!-- 分页怎么处理的 数据怎么传递的 原始数据 从哪里来 -->
        </div>
        <div class="related-page">
          <el-button>{{ showDate.search.pageNumber }}/{{ showDate.numPages }}</el-button>
          <el-button type="primary" @click="btnPre" :disabled="showDate.search.pageNumber === 1">上一页</el-button>
          <el-button type="primary" @click="btnNext"
            :disabled="showDate.search.pageNumber === showDate.numPages">下一页</el-button>
        </div>
      </div>

    </template>
  </FullScreenDialog>
</template>

<script setup lang='ts'>
import { ref, toRefs, onBeforeMount, nextTick } from 'vue'
import useDialog from '@/hooks/useDialog';
import abnormalDetails from './abnormalDetail';
import ImgCanvas from '../showPdf.vue';
import { quoteStore } from '@/store/quoteData'
const store = quoteStore()
const RefImgCanVas = ref()
const { dialog, onShow } = useDialog()
// 页码怎么处理 
const { showDate, clearShowDate, getImageLook, btnPre, btnNext } = abnormalDetails(RefImgCanVas)
// 保存
const confirm = () => { }
const onClose = () => {
  // 清除数据
  dialog.visible = false
  clearShowDate()
  store.clearHistoryData()
}
const show = async (row?: any) => {
  // 1 true 处理后端返回的数据 2 false 处理本地的数据
    store.resetHistoryData(row)
    if (store.resetData.length > 0) {
      await getImageLook({ filesId: store.resetData[0].filesId, pageNumber: store.resetData[0].pageNumber }, store.resetData[0].distance)
    }
  dialog.visible = true
  dialog.width = 850
  dialog.showFooter = false
  dialog.screenFlag = false

  nextTick(() => {
    RefImgCanVas.value?.initImage()
  })
}

defineExpose({
  show
})
</script>
<style scoped lang='scss'>
.related {
  position: relative;

  .related-page {
    position: fixed;
    height: 40px;
    width: 814px;
    bottom: 5px;
    border-radius: 5px;
    text-align: center;
    line-height: 40px;
  }
}
</style>